<template>
  <div>
    <div class="navHead">
      <van-nav-bar
        left-text="入驻商务部"
        left-arrow
        class="head-nav-bar"
        @click-left="$router.back()"
      />
      <div class="busy-container">
        <div class="clearfix">
          <span><div class="label_color"></div></span>
          <span class="label_text">企业资料</span>
        </div>
        <van-form ref="registerForm" @submit="onSubmit">
          <van-field
            label="*法人类型"
            v-model="formdate.peopleType"
            :rules="[
              {
                required: true,
                message: '法人类型不能为空',
                trigger: 'onblur',
              },
            ]"
          >
            <template #input>
              <van-dropdown-menu>
                <van-dropdown-item
                  v-model="formdate.peopleType"
                  :options="option1"
                />
              </van-dropdown-menu>
            </template>
          </van-field>
          <van-field
            label="*企业名称:"
            v-model="formdate.companyName"
            :rules="[
              {
                required: true,
                message: '企业名称不能为空',
              },
            ]"
          />
          <van-field
            label="*显示名称:"
            v-model="formdate.companyName"
            :rules="[
              {
                required: true,
                message: '名称不能为空',
              },
            ]"
          />
          <van-field
            label="*社会信用代码"
            placeholder="请输入18位统一社会信用"
            v-model="formdate.code"
            name="pattern"
            :rules="[{ pattern, message: '请输入正确内容' }]"
          />
          <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="formdate.registrationTime"
            label="注册时间"
            placeholder="请选择工商注册时间"
            v-model="formdate.registrationTime"
            :rules="[
              {
                required: true,
                message: '注册时间不能为空',
                trigger: 'onblur',
              },
            ]"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="getTime"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            label="*注册资本（万元）："
            v-model="formdate.registrationCapital"
            :rules="[
              {
                required: true,
                message: '注册资本不能为空',
                trigger: 'onblur',
              },
            ]"
          />
          <van-field
            readonly
            clickable
            name="area"
            :value="formdate.areaSelect"
            label="地区选择"
            placeholder="点击选择省市区"
            v-model="formdate.areaSelect"
            :rules="[
              {
                required: true,
                message: '地区不能为空',
                trigger: 'onblur',
              },
            ]"
            @click="showArea = true"
          />
          <van-popup v-model="showArea" position="bottom">
            <van-area
              :area-list="areaList"
              @confirm="onConfirm"
              @cancel="showArea = false"
            />
          </van-popup>
          <van-field
            label="*企业类型"
            v-model="formdate.enterpriseType"
            :rules="[
              {
                required: true,
                message: '企业类型不能为空',
                trigger: 'onblur',
              },
            ]"
          >
            <template #input>
              <van-dropdown-menu>
                <van-dropdown-item
                  v-model="formdate.enterpriseType"
                  :options="option2"
                />
              </van-dropdown-menu>
            </template>
          </van-field>
          <!-- <h5>*主营业务：</h5> -->
          <van-field
            label="*主营业务："
            ref="main"
            v-model="formdate.mainBusiness"
            :rules="[
              {
                required: true,
                message: '企业类型不能为空',
                trigger: 'onblur',
              },
            ]"
          />
          <div class="labelBox">
            <van-button
              native-type="button"
              size="small"
              round
              class="labelList"
              v-for="obj in list"
              :key="obj.id"
              :class="{ active: mainList.indexOf(obj.name) != -1 }"
              @click="getBtnContext(obj.name, obj.id)"
              >{{ obj.name }}</van-button
            >
          </div>
          <div>
            <van-button block type="info" native-type="submit" class="footerBtn"
              >下一步</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
export default {
  data () {
    return {
      active: false, // 用来动态添加高亮效果
      pattern: /\d{18}/, // 信用代码校验正则
      formdate: {
        peopleType: '',
        companyName: '',
        code: '',
        registrationTime: '',
        registrationCapital: '',
        areaSelect: '',
        enterpriseType: '',
        mainBusiness: ''
      },
      // mainList: [], //用来存入点击按钮得到的数据
      mainList: [],
      option1: [
        { text: '企业法人', value: '0' },
        { text: '非企业法人', value: '1' }
      ],
      option2: [
        { text: '国有企业', value: 'a' },
        { text: '私有企业', value: 'b' },
        { text: '集体企业', value: 'c' },
        { text: '混合所有制企业', value: 'd' }
      ],
      showArea: false,
      areaList, // 数据格式见 Area 组件文档
      time: '',
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      showPicker: false,
      list: [
        { name: '产康师', id: 0 },
        { name: '月嫂', id: 1 },
        { name: '育婴师', id: 2 },
        { name: '保洁/清', id: 3 },
        { name: '保姆', id: 4 },
        { name: '早教/托', id: 5 },
        { name: '养老/陪', id: 6 },
        { name: '家装/班', id: 7 }
      ]
    }
  },
  created () {},
  mounted () {},
  methods: {
    onConfirm (values) {
      this.formdate.areaSelect = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.showArea = false
    },
    btnOk (time) {
      this.time = time
      this.showPicker = false
    },

    getTime (val) {
      // console.log(val);
      // console.log(this.currentDate);
      this.formdate.registrationTime = this.timeFormat(this.currentDate)
      this.showPicker = false
    },
    timeFormat (time) {
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      return year + '年' + month + '月' + day + '日'
    },
    async onSubmit (values) {
      console.log(111)
      // await this.$refs.registerForm.validate()
      // console.log('submit', values);
    },
    getBtnContext (name) {
      // this.active = e.target.innerText;
      // console.log(e.target.innerText);
      // console.log(this.$refs.main);

      var str = this.mainList.some((item) => item === name)
      // console.log(str);
      if (!str) {
        this.mainList.push(name)
      } else {
        var str1 = this.mainList.findIndex((item) => item === name)
        //  console.log(str1);
        this.mainList.splice(str1, 1)
      }
      // console.log(this.mainList);
      this.formdate.mainBusiness = this.mainList.toString()
    }
  }
}
</script>

<style scoped scoped lang="less">
.navHead {
  width: 750px;
  height: 1416px;
  overflow: scroll;
  position: relative;
  /deep/.head-nav-bar {
    padding-top: 40px;
    width: 750px;
    height: 180px;
    background-color: #3f51b5;
    .van-nav-bar__text {
      font-size: 32px;
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
    }
  }
  /deep/.busy-container {
    width: 704px;
    height: 1126px;
    background-color: #fff;
    z-index: 2;
    position: absolute;
    top: 166px;
    left: 24px;
    border-radius: 8px 8px 8px 8px;
    // overflow: hidden;
    .clearfix {
      margin-top: 38px;
      border-bottom: 1px solid #f0eeee;
      .label_color {
        width: 8px;
        height: 28px;
        margin-left: 40px;
        margin-bottom: 32px;
        background-color: rgba(63, 81, 181, 100);
        float: left;
      }
      .label_text {
        float: left;
        font-size: 28px;
        padding-left: 20px;
        line-height: 28px;
      }
    }
    .clearfix:after {
      clear: both;
    }
    /* ie6 7 专门清除浮动的样式*/
    .van-field__body {
      float: right;
    }
    .van-cell__title {
      width: 50%;
      line-height: 100px;
      text-align: left;
      font-size: 26px;
      vertical-align: middle;
    }
    .van-ellipsis {
      font-size: 26px;
    }
    .van-field__control {
      line-height: 100px;
    }
    h5 {
      font-size: 26px;
      margin-left: 36px;
    }
    .labelBox {
      position: absolute;
      left: 24px;
      .labelList {
        // background-color: red;
        margin-right: 45px;
        border-radius: 28px 28px 28px 28px;
        border: 1px solid rgba(151, 145, 145, 100);
        text-align: center;
        font-size: 20px;
        color: #979191;
      }
    }
    .footerBtn {
      width: 750px;
      height: 98px;
      margin-top: 180px;
      margin-left: -30px;
    }
  }
  .van-cell {
    height: 96px;
  }

  .active {
    background-color: red;
  }
}
</style>
